<template>
  <!-- vue3 中的组件 可以没有根标签 -->
  <h1>我是APP组件</h1>
  <h2>姓名:{{ xingming }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h3>工作种类:{{ job.type }}</h3>
  <h3>薪水:{{ job.salary }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  components: {},
  // 此处测试setup 不考虑响应式
  setup() {
    // 数据
    let name = ref("张三");
    let age = ref(18);
    let job = ref({
      type: "后端",
      salary: "30K",
    });

    // 方法
    function changeInfo() {
      name.value = "李四";
      age.value = 29;
      // job.value.type = "前端";
      // job.value.salary = "25K";
      job.value = {
        type: "前端",
        salary: "25K",
      };
    }
    //返回对象
    return {
      xingming: name,
      age,
      job,
      changeInfo,
    };

    // 返回渲染函数
    /*return () => {
      h("h1", "培立优");
    };*/
  },
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
